<template>
<div class="search-detail">
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="视频" name="first">
      <div class="search-videos">
        <ul>
          <li>
              <div style="position: relative">
            <div class="search-cover-box">
              <img src="../../assets/images/hamburger.png" />
              <div class="search-cover-main">
                <img src="../../assets/images/hamburger.png" />
              </div>
            </div>
            <div class="search-number">
              <span class="iconfont icon-aixin">36</span>
              <span class="search-time">00:36</span>
            </div>
          </div>
          <p class="search-title">
           来伊份149抵199而且还全场通用，这力度可以#618年中狂欢季#来伊份夏季大促 #抖音本地流量来了 #端午安康#618年中大促
          </p>
          <p class="search-source">
            @中国青年报<i>-</i>2012年12月1日
          </p>
          </li>
             <li>
              <div style="position: relative">
            <div class="search-cover-box">
              <img src="../../assets/images/hamburger.png" />
              <div class="search-cover-main">
                <img src="../../assets/images/hamburger.png" />
              </div>
            </div>
            <div class="search-number">
              <span class="iconfont icon-aixin">36</span>
              <span class="search-time">00:36</span>
            </div>
          </div>
          <p class="search-title">
           来伊份149抵199而且还全场通用，这力度可以#618年中狂欢季#来伊份夏季大促 #抖音本地流量来了 #端午安康#618年中大促
          </p>
          <p class="search-source">
            @中国青年报<i>-</i>2012年12月1日
          </p>
          </li>
             <li>
              <div style="position: relative">
            <div class="search-cover-box">
              <img src="../../assets/images/hamburger.png" />
              <div class="search-cover-main">
                <img src="../../assets/images/hamburger.png" />
              </div>
            </div>
            <div class="search-number">
              <span class="iconfont icon-aixin">36</span>
              <span class="search-time">00:36</span>
            </div>
          </div>
          <p class="search-title">
           来伊份149抵199而且还全场通用，这力度可以#618年中狂欢季#来伊份夏季大促 #抖音本地流量来了 #端午安康#618年中大促
          </p>
          <p class="search-source">
            @中国青年报<i>-</i>2012年12月1日
          </p>
          </li>
             <li>
              <div style="position: relative">
            <div class="search-cover-box">
              <img src="../../assets/images/hamburger.png" />
              <div class="search-cover-main">
                <img src="../../assets/images/hamburger.png" />
              </div>
            </div>
            <div class="search-number">
              <span class="iconfont icon-aixin">36</span>
              <span class="search-time">00:36</span>
            </div>
          </div>
          <p class="search-title">
           来伊份149抵199而且还全场通用，这力度可以#618年中狂欢季#来伊份夏季大促 #抖音本地流量来了 #端午安康#618年中大促
          </p>
          <p class="search-source">
            @中国青年报<i>-</i>2012年12月1日
          </p>
          </li>
             <li>
              <div style="position: relative">
            <div class="search-cover-box">
              <img src="../../assets/images/hamburger.png" />
              <div class="search-cover-main">
                <img src="../../assets/images/hamburger.png" />
              </div>
            </div>
            <div class="search-number">
              <span class="iconfont icon-aixin">36</span>
              <span class="search-time">00:36</span>
            </div>
          </div>
          <p class="search-title">
           来伊份149抵199而且还全场通用，这力度可以#618年中狂欢季#来伊份夏季大促 #抖音本地流量来了 #端午安康#618年中大促
          </p>
          <p class="search-source">
            @中国青年报<i>-</i>2012年12月1日
          </p>
          </li>
             <li>
              <div style="position: relative">
            <div class="search-cover-box">
              <img src="../../assets/images/hamburger.png" />
              <div class="search-cover-main">
                <img src="../../assets/images/hamburger.png" />
              </div>
            </div>
            <div class="search-number">
              <span class="iconfont icon-aixin">36</span>
              <span class="search-time">00:36</span>
            </div>
          </div>
          <p class="search-title">
           来伊份149抵199而且还全场通用，这力度可以#618年中狂欢季#来伊份夏季大促 #抖音本地流量来了 #端午安康#618年中大促
          </p>
          <p class="search-source">
            @中国青年报<i>-</i>2012年12月1日
          </p>
          </li>
             <li>
              <div style="position: relative">
            <div class="search-cover-box">
              <img src="../../assets/images/hamburger.png" />
              <div class="search-cover-main">
                <img src="../../assets/images/hamburger.png" />
              </div>
            </div>
            <div class="search-number">
              <span class="iconfont icon-aixin">36</span>
              <span class="search-time">00:36</span>
            </div>
          </div>
          <p class="search-title">
           来伊份149抵199而且还全场通用，这力度可以#618年中狂欢季#来伊份夏季大促 #抖音本地流量来了 #端午安康#618年中大促
          </p>
          <p class="search-source">
            @中国青年报<i>-</i>2012年12月1日
          </p>
          </li>
        </ul>
      </div>
    </el-tab-pane>
    <el-tab-pane label="用户" name="second">
      <div class="search-user">
        <ul>
          <li>
            <div class="search-message-top">
              <div class="search-avatar"> <img src="../../assets/images/hamburger.png" /></div>
              <div class="search-company"><div class="store-name">来伊份</div><div class="company-name">上海来伊份股份有限公司</div></div>
              <div class="search-concern-btn"><el-button size="small">关注</el-button></div>
            </div>
            <div class="search-message-center">音秀号:yy506158491<span>|</span>223.1万获赞<span>|</span>69.7万粉丝</div>
            <div class="search-message-bottom"><p>新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份</p></div>
          </li>
              <li>
            <div class="search-message-top">
              <div class="search-avatar"> <img src="../../assets/images/hamburger.png" /></div>
              <div class="search-company"><div class="store-name">来伊来伊份来伊份来伊份来伊份来伊份来伊份来伊份来伊份份</div><div class="company-name">上海来伊份股份有限公司</div></div>
              <div class="search-concern-btn"><el-button size="small">关注</el-button></div>
            </div>
            <div class="search-message-center">音秀号:yy506158491<span>|</span>223.1万获赞<span>|</span>69.7万粉丝</div>
            <div class="search-message-bottom"><p>新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份</p></div>
          </li>
              <li>
            <div class="search-message-top">
              <div class="search-avatar"> <img src="../../assets/images/hamburger.png" /></div>
              <div class="search-company"><div class="store-name">来伊份</div><div class="company-name">上海来伊份股份有限公司上海来伊份股份有限公司上海来伊份股份有限公司上海来伊份股份有限公司</div></div>
              <div class="search-concern-btn"><el-button size="small">关注</el-button></div>
            </div>
            <div class="search-message-center">音秀号:yy506158491<span>|</span>223.1万获赞<span>|</span>69.7万粉丝</div>
            <div class="search-message-bottom"><p>新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份新鲜零食 就要来伊份</p></div>
          </li>
        </ul>
      </div>
    </el-tab-pane>
  </el-tabs>
</div>
  
</template>

<script>
export default {
  data() {
      return {
        activeName: 'first',
        keyword: this.$route.query.keyword
      };
    },
    methods: {
      handleClick(tab, event) {
      },
      
    }
}
</script>

<style>
/* .search-videos,
.search-user{
   width: 100%;
   height: 100%;
   background: #161823;
} */
.search-detail {
    width: 100%;
   min-height: 100%; 
    padding: 20px 30px;
    background: #161823;
    box-sizing: border-box;
}
.search-detail .el-tabs__item{
  color: #fff;
  font-size: 16px;
}
.search-detail .el-tabs__item.is-active {
    color: red;
}
/*去掉切换时el-tab-pane底部的蓝色下划线*/
.search-detail .el-tabs__active-bar {
  background-color: transparent !important;
}
 
/*去掉tabs底部的下划线*/
.search-detail .el-tabs__nav-wrap::after {
  position: static !important;
}
.search-videos ul {
  display: flex;
  flex-wrap: wrap;
}
.search-videos ul li {
  cursor: pointer;
  list-style: none;
  width: 18%;
  border-radius: 5px;
  height: 305px;
  float: left;
  margin: 8px 13px;
  color: #fff;
  background: #252632;
}
.search-videos ul li:hover {
  background: #33343f;
}
.search-videos ul li > div {
  height: 220px;
  overflow: hidden;
  border-radius: 5px;
}
.search-cover-box > img {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  /* height: 220px; */
  filter: blur(8px);
}

.search-cover-main > img {
  position: absolute;
  width: 100%;
  height: 220px;
  z-index: 99;
  top: 0;
  object-fit: contain;
  border-radius: 5px 5px 0 0;
}
.search-videos ul li > div > div > img {
  width: 100%;
  height: 220px;
  border-radius: 5px 5px 0 0;
}
.search-title {
  height: 35px;
  font-size: 14px;
  padding: 8px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #fff;
  display: -webkit-box;
}
.search-source {
  font-size: 12px;
  color: rgb(153 153 153);
  margin: 6px 0 10px 10px;
}
.search-source i {
  margin: 0 8px;
}
.search-number {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75));
  bottom: 0;
  height: 48px;
  opacity: 0.8;
  position: absolute;
  width: 100%;
  z-index: 100;
}
.search-number span {
  align-items: center;
  bottom: 4px;
  color: #fff;
  display: flex;
  flex-direction: row;
  font-family: PingFang SC, DFPKingGothicGB-Medium, sans-serif;
  font-size: 14px;
  font-weight: 500;
  justify-content: center;
  left: 8px;
  line-height: 22px;
  position: absolute;
}
.search-number .icon-aixin:before {
  margin-right: 2px;
}
/* .recreation-number span:before{
  content:'\e8ab;';
  color: #fff;
} */
.search-time {
  right: 8px;
  margin-left: auto;
  background: #4f4f4f;
  height: 22px;
  border-radius: 7px;
  /* float: right; */
  width: 45px;
}
.search-user{
  width: 100%;
  height: 100%;
  background: #161823;
}
.search-user ul{
 display: flex;
  flex-wrap: wrap;
}
.search-user ul li:hover {
  background:#41424c;
}
.search-user ul li {
    background: #282935;
    width: 32%;
    height: 140px;
    margin: 0 8px 10px;
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;
}
.search-avatar>img{
  width: 50px;height: 50px;
  border-radius: 50%;
}
.search-message-top{
  display: flex;
}
.search-company {
    color: #fff;
    margin-left: 10px;
    width: 75%;
    line-height: 1.8;
}
.store-name{
   overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.company-name{
  font-size: 12px;
   overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.search-concern-btn{
  line-height: 50px;
}
.search-concern-btn .el-button{
  background: #fe2c55;
  color: #fff;
  border: none;
  margin-left: 5px;
}
.search-concern-btn .el-button--small {
    padding: 10px 25px;
   
}
.search-message-center{
  margin: 10px 0 8px 0;
  font-size: 12px;
  color: #fff;
}
.search-message-center>span{
  margin: 0 10px;
  color: #4c4646;
}
.search-message-bottom p{
   font-size: 12px;
  color: #949494;
   overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
</style>